<template>
  <div class="categoryCart">
    <div class="contenBox set-pc-style" id="contenBox1" @click="showTap">
      <div class="posleft" v-if="!show">
        <i class="menu-icon iconfont icon-fontclass-gouwuche1"></i>
        <div class="numsa" v-if="cartsNum">{{ cartsNum }}</div>
      </div>
      <div class="select">{{ total_amount ? $i18n.t("money") : "" }}{{ total_amount ? total_amount : "请选择商品" }}</div>
      <div class="right" @click.stop="checkGoods">去结算</div>
    </div>
    <van-popup v-model="show" :style="{ width: '100%', maxHeight: '60%' }" position="bottom" @close="trggleCart">
      <div class="top">
        <div style="display: flex; align-items: center;">
          <div class="iconfont iconfontcss" @click="trggleCart">
            <div class="iconfont icon-all_buycar"></div>
          </div>
          <span class="span select">(已选{{ cartsNum }}件) </span>
        </div>
        <div class="clear_car" @click="clearCart">
          <icon class="iconfont icon-delete"></icon>
          <span class="span">清空购物车</span>
        </div>
      </div>
      <div class="carPopup">
        <div>
          <div class="goodsList">
            <div class="goods" :key="index" v-for="(item, index) in carts">
              <div class="goods_img" @click="goToGoodsO2O(item)">
                <img :src="item.goods_thumb" />
              </div>
              <div class="ul goodsName" @click="goToGoodsO2O(item)">
                <div class="li name">
                  <div class="span" v-if="item.goods_title">({{ item.goods_title }})</div>
                </div>
                <div class="show_time_word_txt" v-if="item.show_time_word" style="margin-top: 0.325rem;">{{item.show_time_word}}</div>
                <div class="li price">{{ $i18n.t("money") }}{{ item.price }}</div>
              </div>
              <div class="addBtn">
                <i class="iconfont icon-store_reduceLine" @click="numberLeft1(item, index)"></i>
                <input type="number" v-model="item.total" @focus="clickCount(item)" @blur.stop="changeCount_2(index, item)" />
                <i class="iconfont icon-store_plus" @click="numberRight1(item, index)"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <!--配送方式冲突-->
    <van-popup v-model="showChoose" round style="width: 20rem;">
      <div class="wrapper">
        <div class="block" @click.stop>
          <div class="choose-title">您的购物车配送方式有冲突，请选择其中一种配送方式~</div>

          <div class="choose-content">
            <van-radio-group v-model="radioChoose">
              <div v-for="(item, index) in dispatch_types" :key="index" style="padding: 0.5rem 0;">
                <van-radio :name="index.toString()" checked-color="#ff4949">
                  <div class="radio-title">{{ item.name }}({{ item.member_carts.length }}件)</div>
                </van-radio>
                <ul class="radio-list">
                  <li class="radio-item" v-for="(goods, i) in item.member_carts" :key="i">
                    <p>{{ goods.title }}</p>
                    <p v-if="goods.option_title" style="font-size: 12px; color: #666;">规格：{{ goods.option_title }}</p>
                  </li>
                </ul>
              </div>
            </van-radio-group>
          </div>

          <div class="buttons">
            <div class="button-item">
              <div class="button-content" @click="showChoose = false">返回购物车</div>
            </div>
            <div class="button-item">
              <div class="button-content red" @click="toBuy">去结算</div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <!--配送方式冲突end-->
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  props: ["datas", "id", "component_key"],
  data() {
    return {
      total_amount: "",
      cartsNum: "",
      show: false,
      carts: [],
      cart_ids: [],
      buttondisab: true,
      goodsCartsOld: "",
      showChoose: false,
      dispatch_types: [],
      radioChoose: "",
    };
  },
  mounted() {
    this.getCart();
  },
  methods: {
    toBuy() {
      this.submitGoods();
    },
    clearCart() {
      if (this.cart_ids.length == 0) {
        Toast("请选择删除商品");
        return;
      }
      $http.post("cart.list.destroy", { ids: this.cart_ids.join(",") }, " ").then(
        response => {
          if (response.result === 1) {
            Toast(response.msg);
            this.show = false;
            this.getCart();
          } else {
            Toast(response.msg);
          }
        },
        response => {
          console.log(response);
        }
      );
    },
    checkGoods() {
      if (this.cart_ids.length == 0) {
        Toast("请选择结算商品");
        return;
      }

      if (this.cart_ids.length > 50) {
        Toast("最多一次性只能下单50样商品");
        return;
      }

      let url = "memberCart.checkout";
      $http.get(url, { cart_ids: this.cart_ids.join(",") }, "操作中").then(
        response => {
          if (response.result == 1) {
            if (response.data.need_choose == 1) {
              this.dispatch_types = response.data.dispatch_types;
              this.showChoose = true;
            } else {
              this.submitGoods();
            }
          } else {
            this.$dialog.alert({
              title: "提示",
              message: response.msg
            });
          }
        },
        response => {
          console.log(response);
        }
      );
    },
    //提交订单
    submitGoods() {
      let _cart_ids = [];
      if (this.showChoose && !this.radioChoose) {
        Toast("请先选择配送方式");
        return;
      }

      if (this.showChoose) {
        // 配送方式有冲突
        for (let i = 0; i < this.dispatch_types[this.radioChoose].member_carts.length; i++) {
          _cart_ids.push(this.dispatch_types[this.radioChoose].member_carts[i].id);
        }
      } else {
        _cart_ids = this.cart_ids;
      }

      this.$router.push(
        this.fun.getUrl(
          "goodsorder",
          {},
          {
            tag: "-1",
            cart_ids: _cart_ids.join(",")
          }
        )
      );
    },
    trggleCart() {
      this.show = false;
      this.$emit("cartShowClose", true);
    },
    changeCount_2(index, item) {
      // console.log(index, item);
      let that = this;
      this.carts[index].total = item.total;
      let goodsCartsData = this.carts[index];
      if (goodsCartsData.total < 0) {
        Toast("商品数量不能为负数");
        this.carts[index].total = this.goodsCartsOld;
        return;
      }
      if (goodsCartsData.total < this.goodsCartsOld) {
        // let lowerNum = this.goodsCartsOld - goodsCartsData.total;
        this.addCart(goodsCartsData.cart_id, item.total);
      } else if (goodsCartsData.total > this.goodsCartsOld) {
        // let addNum = goodsCartsData.total - that.data.goodsCartsOld;
        this.addCart(goodsCartsData.cart_id, item.total);
      }
    },
    clickCount(item) {
      let total = item.total;
      this.goodsCartsOld = total;
    },
    numberLeft1(item, index) {
      if (!this.buttondisab) return;
      this.buttondisab = false;
      let num = Number(item.total) - 1;
      let id = item.cart_id;
      this.addCart(id, num);
    },
    addCart(id, num) {
      $http.post("cart.list.updateNumV2", { id: id, num: num }, " ").then(
        response => {
          if (response.result === 1) {
            Toast(response.msg);
            this.getCart();
            this.buttondisab = true;
          } else {
            Toast(response.msg);
          }
        },
        response => {
          console.log(response);
        }
      );
    },
    numberRight1(item, index) {
      if (!this.buttondisab) return;
      this.buttondisab = false;
      let num = Number(item.total) + 1;
      let id = item.cart_id;
      this.addCart(id, num);
    },
    showTap() {
      this.show = !this.show;
    },
    getCart() {
      $http.post("cart.list.otherPageCartList", {}, " ").then(
        response => {
          if (response.result === 1) {
            // console.log(response.data, "ddddd");
            let carts = [];
            let cart_ids = this.cart_ids;
            if (response.data.list.length > 0) {
              for (let i = 0; i < response.data.list.length; i++) {
                for (let j = 0; j < response.data.list[i].carts.length; j++) {
                  carts.push(response.data.list[i].carts[j]);
                }
              }
              // console.log(carts, "ddddddddddddd");
              for (let i = 0; i < response.data.list.length; i++) {
                for (let j = 0; j < response.data.list[i].carts.length; j++) {
                  cart_ids.push(response.data.list[i].carts[j].cart_id);
                }
              }
            }
            this.carts = carts;
            // console.log(carts, "dddddddd");
            this.total_amount = response.data.total_amount;
            let nums = 0;
            for (let i = 0; i < this.carts.length; i++) {
              nums += this.carts[i].total;
            }
            this.cartsNum = nums;
          } else {
            Toast(response.msg);
          }
        },
        response => {
          console.log(response);
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.categoryCart {
  width: 100%;

  .contenBox {
    width: 100%;
    height: 2.8125rem;
    background: #2c2c2c;
    position: fixed;
    bottom: 0;
    z-index: 9999;
    padding-left: 4.9063rem;
    padding-right: 0.94rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .right {
      width: 5.31rem;
      height: 2.19rem;
      background: #f15353;
      border-radius: 1.09rem;
      text-align: center;
      line-height: 2.19rem;
      color: #fff;
    }

    .select {
      color: #fff;
    }

    .posleft {
      width: 2.81rem;
      height: 2.81rem;
      position: absolute;
      left: 0.94rem;
      top: -1.4rem;
      background: #fc3;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      .numsa {
        min-width: 1.125rem;
        width: auto;
        // height: 1.125rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        position: absolute;
        top: -0.1563rem;
        right: -0.1563rem;
        background: #f15353;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 100%;
      }

      .iconfont {
        font-size: 1.3rem;
      }
    }

    .select {
      color: #fff;
    }

    .right {
      width: 5.31rem;
      height: 2.19rem;
      background: #f15353;
      border-radius: 1.09rem;
      text-align: center;
      line-height: 2.19rem;
      color: #fff;
    }
  }
}

/* 购物车列表弹窗 */
.top {
  display: flex;
  justify-content: space-between;
  padding: 0 0.875rem;
  align-items: center;
  height: 2.5rem;
  font-size: 1rem;
  border-bottom: solid 0.0625rem #ebebeb;
}

.top .iconfontcss {
  /* display: block; */

  /* background: url(../../../assets/images/store_car2.png) no-repeat center; */

  /* background-size: 80px; */
  align-self: center;
  width: 2rem;
  height: 2rem;
  background: #f15353;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top .iconfontcss .icon-all_buycar {
  font-size: 1.7813rem;
  color: #fff;
}

.top .select {
  font-size: 0.75rem;
  color: #8c8c8c;
  margin-left: 0.25rem;
}

.top .clear_car {
  font-size: 0.875rem;
  color: #666;
  display: flex;
  align-items: center;
}

.top .clear_car .iconfont {
  font-size: 1.125rem;
  color: #666;
  margin-right: 0.25rem;
}

.carPopup {
  max-height: 20rem;
  overflow-y: scroll;
  padding-bottom: 3.125rem;
}

.carPopup .goodsList {
  padding: 0 0.875rem;
}

.carPopup .goodsList .goods {
  border-bottom: solid 0.0625rem #ebebeb;
  display: flex;
  position: relative;
  padding: 0.625rem 0;
  align-items: center;
}

.carPopup .goodsList .goods .goods_img {
  width: 3.375rem;
  height: 3.375rem;
  border-radius: 0.125rem;
  overflow: hidden;
  background: #f2f2f2;
  margin-right: 0.625rem;
  margin-left: 0.625rem;
}

.carPopup .goodsList .goods .goods_img img {
  width: 100%;
}

.carPopup .goodsList .goods .goodsName {
  width: 13.75rem;
  text-align: left;
}

.carPopup .goodsList .goods .goodsName .name {
  display: flex;
  align-items: center;
}

.carPopup .goodsList .goods .goodsName .name .install-tag {
  background: #ff6b1b;
  font-size: 0.3125rem;
  color: #fff;
  padding: 0 0.1563rem;
  border-radius: 0.0625rem;
  margin-right: 0.125rem;
}

.carPopup .goodsList .goods .goodsName .name .goods-names {
  font-size: 0.4688rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carPopup .goodsList .goods .goodsName .price {
  color: #f15353;
  font-size: 1rem;
  margin-top: 0.625rem;
}

.carPopup .goodsList .goods .addBtn {
  position: absolute;
  bottom: 0.625rem;
  right: 0;
  display: flex;
}

.carPopup .goodsList .goods .addBtn .iconfont {
  width: 1.75rem;
  height: 1.75rem;
  line-height: 1.75rem;
  font-size: 1.625rem;
  color: #f15353;
}

.carPopup .goodsList .goods .addBtn .icon-store_reduceLine {
  color: #aaa;
}

.carPopup .goodsList .goods .addBtn input {
  width: 2rem;
  text-align: center;
  font-size: 0.75rem;
  border: none;
}

/* 购物车列表弹窗 end */

/* 配送方式样式 */
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;

  .block {
    position: relative;
    width: 19rem;
    height: 22rem;
    border-radius: 15px;
    background-color: #fff;
    padding: 0.5rem;
    text-align: left;
  }

  .choose-title {
    color: #878787;
    padding: 0.5rem;
    border-bottom: solid 1px #f5f5f5;
  }

  .choose-content {
    height: 15rem;
    overflow-y: scroll;
  }

  .radio-title {
    font-size: 16px;
    font-weight: bold;
  }

  .radio-list {
    padding: 0.5rem;
  }

  .radio-item {
    padding: 0.5rem 0;
    border-bottom: solid 1px #f5f5f5;
  }

  .buttons {
    display: flex;
    position: absolute;
    bottom: 0.5rem;
    width: 100%;
  }

  .button-item {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .button-content {
    margin: 0 auto;
    width: 6.5rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 0.5rem;
    border: solid 1px #b5b5b5;
  }

  .button-content.red {
    color: #fff;
    background-color: #f15353;
    border: none;
  }
}

/* end */
</style>